<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.绘制线条</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/tween.js/r14/Tween.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;}
        body{
            background: #dddddd;
        }
        body>* {

        }
        canvas{
            display: block;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="1920" height="856" style="
margin: 0 auto;
background: #130504;
/*background: #eee;*/
">你的浏览器居然不支持Canvas？！赶快换一个吧！！</canvas>
<img id="img1" src="images/animation-mask.png" alt="" style="display: none;">
<img id="img2" src="images/5-mask-grd.png" alt="" style="display: none;">
<img id="imgbg" src="images/lead-bg.jpg" alt="" style="display: none;">
<script>
    window.onload=function () {




    };

    //贝塞尔曲线定义
    function Point2D(x,y){
        this.x=x||0.0;
        this.y=y||0.0;
    }
    function PointOnCubicBezier( cp, t )
    {
        var   ax, bx, cx;
        var   ay, by, cy;
        var   tSquared, tCubed;
        var	  result = new Point2D ;
        /*計算多項式係數*/
        cx = 3.0 * (cp[1].x - cp[0].x);
        bx = 3.0 * (cp[2].x - cp[1].x) - cx;
        ax = cp[3].x - cp[0].x - cx - bx;
        cy = 3.0 * (cp[1].y - cp[0].y);
        by = 3.0 * (cp[2].y - cp[1].y) - cy;
        ay = cp[3].y - cp[0].y - cy - by;
        /*計算位於參數值t的曲線點*/
        tSquared = t * t;
        tCubed = tSquared * t;
        result.x = (ax * tCubed) + (bx * tSquared) + (cx * t) + cp[0].x;
        result.y = (ay * tCubed) + (by * tSquared) + (cy * t) + cp[0].y;
        return result;
    }



    //画布绘制
    var cans= document.getElementById('canvas');
    var can2d= cans.getContext('2d');

    var img= document.getElementById('img1');
    var imgbg= document.getElementById('imgbg');

    var start=1, min=1, max=40, ltrue=[false, false];
    // start开始值， min=开始值，max范围值（放大倍率）
    can2d.beginPath();
    img.onload=function () {
        ltrue[0]=true;
        loadImg(ltrue);
    };
    imgbg.onload=function () {
        ltrue[1]=true;
        loadImg(ltrue);
    };
    function loadImg(i) {
        if(i[0] && i[1]){
            can2d.save();
            requestAnimationFrame(myfun);
        }
    }

    //两张图片的遮罩动画
    // function myfun(){
    //     can2d.restore();
    //     can2d.save();
    //     can2d.clearRect(0,0, 500, 500);
    //
    //     can2d.drawImage(imgbg, 0, 0, 500, 500);
    //
    //     // can2d.fillStyle="green";
    //     // can2d.fillRect(0,0,500,500);
    //
    //     can2d.globalCompositeOperation="destination-in";
    //
    //     // can2d.fillStyle="green";
    //     // can2d.fillRect(100-i/2,100-i/2,50+i,50+i);
    //
    //     can2d.drawImage(img, 100-i/2, 100-i/2, 50+i, 50+i);
    //     i++;
    //     requestAnimationFrame(myfun);
    // }


    var setp= 800; //120fps， 20ms/fps

    var cp=[
        //匀速---实际效果越来越慢
        // new Point2D(0, 0), new Point2D(0.5, 0.5), new Point2D(0.5, 0.5), new Point2D(1, 1)
        //减速---实际效果匀速一样, X加速，Y减速
        new Point2D(0, 0), new Point2D(0.95, 0.05), new Point2D(0.795, 0.035), new Point2D(1, 1)

        // new Point2D(0, 0), new Point2D(1, 0), new Point2D(1, 0), new Point2D(1, 1)
        // new Point2D(0, 0), new Point2D(0.55, 0.055), new Point2D(0.675, 0.19), new Point2D(1, 1)
    ];
    function myfun(){
        can2d.restore();
        can2d.save();
        can2d.clearRect(0,0, 1920, 856);

        can2d.drawImage(imgbg, 0, 0, 1920, 856);
        can2d.globalCompositeOperation="destination-in";

        var cur = 1 / setp * start; //120帧到20倍的过渡
        // console.log(PointOnCubicBezier( cp, cur).x, PointOnCubicBezier( cp, cur).y );
        // var cbz= (PointOnCubicBezier( cp, cur).y+PointOnCubicBezier( cp, cur).x)/2 * (max-min) + min; //取贝塞尔曲线的y坐标过渡。
        var cbz=PointOnCubicBezier( cp, cur).x * (max-min) + min; //取贝塞尔曲线的y坐标过渡。

        // var size= zoom(200,200, cbz),
        //     zom= zoom(200, 200, cbz, true);
        // can2d.drawImage(img, 500-zom[0]/2, -100-zom[1]/2, size[0], size[1]);

        var size= zoom(150, 150, cbz),
            zom= zoom(150, 150, cbz, true);
        // can2d.drawImage(img, 935-zom[0]/2, -25-zom[1]/2, size[0], size[1]);


        var arcColor= can2d.createRadialGradient(960, 0, size[0]/10, 960, 0, size[0]);
        arcColor.addColorStop(0, 'rgba(0,0,0,1)');
        arcColor.addColorStop(0.1, 'rgba(0,0,0,0.9)');
        arcColor.addColorStop(0.5, 'rgba(0,0,0,0.5)');
        arcColor.addColorStop(1, 'rgba(0,0,0,0)');

        can2d.arc( 960, 0 , size[0], 0,2*Math.PI);
        can2d.fillStyle=arcColor;
        can2d.fill();

        start=start+1;
        if(start>setp){
            return false;
        }
        // if(settime) clearTimeout(settime);
        // settime = setTimeout(function () {
        //     myfun();
        // }, 25);
        requestAnimationFrame(myfun);  //默认20ms
    }

    function zero(n) {
        return n<=0?0:n;
    }
    //通过缩放控制尺寸时计算用
    function zoom(w, h, scale, type) {
        /*
        * 按放大倍数去过渡，会造成实际尺寸过渡越来越小。
        * 【需改为按尺寸去做过渡】
        * */

        // type：true 增大的尺寸与缩小的尺寸 || 默认false缩放后的当前尺寸
        // scale 缩放倍率
        if (!type) return [(scale * w).toFixed(0), (scale * h).toFixed(0)];
        if (scale === 1) {
            return [0, 0]
        } else if (scale > 1) {
            return [((scale - 1) * w).toFixed(0), ((scale - 1) * h).toFixed(0)]
        } else {
            return [((1 - scale) * w).toFixed(0), ((1 - scale) * h).toFixed(0)]
        }
    }




</script>
</body>
</html>